<template>
  <el-container>

    <!--左侧导航栏开始-->
    <el-aside width="200px">
      <side-menu></side-menu>
    </el-aside>
    <!--左侧导航栏结束-->

    <!--右侧内容开始-->
    <el-container>

      <!--右侧开头开始-->
      <el-header>

        <strong>VueAdmin后台管理系统</strong>

        <div class="header-avatar">

          <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>

          <el-dropdown>
            <span class="el-dropdown-link">{{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/userCenter">个人中心</router-link>
              </el-dropdown-item>

              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-link href="" target="_blank">网站</el-link>
          <el-link href="" target="_blank">b站</el-link>

        </div>
      </el-header>
      <!--右侧开头结束-->

      <!--右侧中间内容开始-->
      <el-main>
        <tabs></tabs>
        <div style="margin: 0 15px">
          <router-view/>
        </div>
      </el-main>
      <!--右侧中间内容结束-->

    </el-container>
    <!--右侧内容结束-->

  </el-container>
</template>

<script>
  import SideMenu from "./inc/SideMenu";
  import Tabs from "./inc/Tabs";
  import {getUserInfo , logout} from "../network/request"

  export default {
    name: "Home",
    components: {
      SideMenu,
      Tabs
    },
    data() {
      return {
        userInfo: {
          id: '',
          username: '',
          avatar: ''
        }
      }
    },
    created() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        getUserInfo().then(res => {
          this.userInfo = res.data.data
          console.log(this.userInfo.avatar)
        })
      },
      logout() {
        logout().then(res => {
          localStorage.clear()
          sessionStorage.clear()
          this.$store.commit("resetState")
          this.$router.push('/login')
        })
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/Index.css";

</style>
